<template>
	<view style="height: 100vh">
		<layout layoutTitle="出库申请审核">
			<a-spin :spinning="spinning" style="width:100%"/>
			<a-card v-for="(item, index) in data" :key="index" class="compact-card" :title="'申请单号: ' + item.applyNo"
				style="margin: 20px auto; background-color: #fff; width: 90%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
				<div v-if="data.length === 0" class="no-data">暂无已审核数据</div>
				<a-descriptions :column="2" size="small" style="font-size: 14px;">
					<!-- 申请单号 -->
					<a-descriptions-item label="申请单号" span="2">
						<span class="emphasize">{{ item.applyNo }}</span>
					</a-descriptions-item>

					<!-- 申请时间 -->
					<a-descriptions-item label="申请时间">
						{{ formatTime(item.applyTime) }}
					</a-descriptions-item>

					<!-- 申请状态 -->
					<a-descriptions-item label="申请状态">
						<StatusTag :status="item.applyStatus" />
					</a-descriptions-item>

					<!-- 申请人 -->
					<a-descriptions-item label="申请人">
						<user-tag :name="item.applicant" />
					</a-descriptions-item>
				</a-descriptions>

				<!-- 操作按钮 -->
				<div class="button-container">
					<a-button type="primary" @click="handleApprove(item)"
						style="margin-right: 8px; width: 48%; background-color: #52c41a; border-color: #52c41a;">
						通过
					</a-button>
					<a-button type="danger" @click="handleReject(item)"
						style="width: 48%; background-color: #f5222d; border-color: #f5222d;">
						驳回
					</a-button>
				</div>
			</a-card>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog type="error" cancelText="取消" confirmText="确定" title="通知" content="您真的要处理该项吗？"
					@confirm="TongGuo"></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="popup2" type="dialog">
				<uni-popup-dialog type="error" cancelText="取消" confirmText="确定" title="通知" content="您真的要处理该项吗？"
					@confirm="BoHui"></uni-popup-dialog>
			</uni-popup>
		</layout>
	</view>
</template>

<script setup>
	import {
		ref,
		h,
		getCurrentInstance
	} from 'vue';
	import dayjs from 'dayjs';
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		listOutWarehouseApply4Audit,
		updateOutWarehouseApply
	} from "@/api/wmsApply/outWarehouseApply";
	const {
		proxy
	} = getCurrentInstance();
	// 状态标签组件
	const StatusTag = {
		props: ['status'],
		template: `
    <a-tag :color="statusColor">{{ status }}</a-tag>
  `,
		computed: {
			statusColor() {
				const colors = {
					'待审核': 'orange',
					'审核通过': 'green',
					'驳回': 'red',
					'已分拣': 'blue',
				};
				return colors[this.status] || 'gray';
			}
		}
	};
	const choose = ref();
	const spinning=ref(true);
	
	// 用户标签组件
	const UserTag = {
		props: ['name'],
		setup(props) {
			return () => h('a-tag', {
				color: 'cyan'
			}, props.name);
		}
	};

	const data = ref([]);

	const formatTime = (time) => dayjs(time).format('MM-DD HH:mm');

	async function getList() {
		try {
			const ref = await listOutWarehouseApply4Audit({
				pageNum: 1,
				pageSize: 100,
				applyStatus: 1
			});

			let d = [];
			for (const item of ref.rows) {
				const applyStatus = await getDictVaule("apply_status", item.applyStatus);
				const admin = await getQuery("query_user", item.applyUser);

				let a = {
					applyNo: item.serialNo,
					applyTime: item.applyTime,
					applyStatus: applyStatus,
					applicant: admin,
					id:item.id
				};

				d.push(a);
			}
			data.value = d;
			spinning.value=false;
		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}

	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	// 处理通过审核
	const handleApprove = (item) => {
		choose.value = item;
		proxy.$refs.popup.open();

	};

	// 处理驳回审核
	const handleReject = (item) => {
		choose.value = item;
		proxy.$refs.popup2.open();

	};

	function TongGuo(item) {
		console.log("通过");
		updateOutWarehouseApply({
			id: choose.value.id,
			auditStatus: 1,
			applyStatus: 2
		}).then(ref => {
			getList();
			choose.value.id = -1;
		})
	}

	function BoHui() {
		console.log(choose.value);
		updateOutWarehouseApply({
			id: choose.value.id,
			auditStatus: 0,
			applyStatus: 2
		}).then(ref => {
			getList();
			choose.value = -1
		})
	}

	getList();
</script>

<style scoped>
	.container {
		padding: 30rpx;
		background: linear-gradient(135deg, #0a5c36, #1a8e5f);
		min-height: 100vh;
		position: relative;
		overflow: hidden;
	}
	
	.container::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(26, 188, 156, 0.3) 0%, rgba(26, 188, 156, 0) 70%);
		z-index: 1;
	}
	
	.container::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(42, 187, 155, 0.2) 0%, rgba(42, 187, 155, 0) 70%);
		z-index: 1;
	}

	.compact-card {
		border-radius: 24rpx;
		box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);
		margin: 30rpx auto;
		width: 92%;
		overflow: hidden;
		transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
		position: relative;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		border: 1px solid rgba(255, 255, 255, 0.5);
		z-index: 2;
	}
	
	.compact-card:hover {
		transform: translateY(-3rpx) scale(1.01);
		box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.15);
	}
	
	.compact-card::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 6rpx;
		background: linear-gradient(to right, #27ae60, #2ecc71);
	}

	.emphasize {
		color: #16a085;
		font-weight: bold;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
	}
	
	.no-data {
		text-align: center;
		color: #777;
		padding: 80rpx 0;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.no-data::before {
		content: '🍃';
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}

	:deep(.ant-card-head) {
		padding: 30rpx;
		background: linear-gradient(120deg, #045d56, #16a085);
		border-bottom: none;
		position: relative;
	}
	
	:deep(.ant-card-head::after) {
		content: '';
		position: absolute;
		bottom: 0;
		left: 5%;
		width: 90%;
		height: 1px;
		background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
	}

	:deep(.ant-card-head-title) {
		font-size: 30rpx;
		color: white;
		font-weight: 600;
		letter-spacing: 1rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	:deep(.ant-card-body) {
		padding: 30rpx;
		position: relative;
		z-index: 2;
	}

	:deep(.ant-descriptions-item-label) {
		color: #555;
		font-size: 26rpx;
		padding: 16rpx 0;
		font-weight: 500;
		position: relative;
	}
	
	:deep(.ant-descriptions-item-label::after) {
		content: '';
		position: absolute;
		bottom: 8rpx;
		left: 0;
		width: 20rpx;
		height: 3rpx;
		background: #16a085;
	}

	:deep(.ant-descriptions-item-content) {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		padding-left: 4rpx;
	}

	:deep(.ant-tag) {
		font-size: 24rpx;
		padding: 2rpx 16rpx;
		border-radius: 12rpx;
		line-height: 40rpx;
		height: 40rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08);
		border: none;
	}

	a-tag {
		font-size: 24rpx;
		margin: 0;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.button-container {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
		margin-top: 20rpx;
		position: relative;
	}
	
	.button-container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 5%;
		width: 90%;
		height: 1px;
		background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05), transparent);
	}
	
	:deep(.ant-btn) {
		height: 80rpx;
		border-radius: 16rpx;
		font-size: 30rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.12);
		letter-spacing: 2rpx;
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		border: none;
	}
	
	:deep(.ant-btn:active) {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	:deep(.ant-btn-primary) {
		background: linear-gradient(135deg, #27ae60, #2ecc71);
	}
	
	:deep(.ant-btn-primary:hover) {
		background: linear-gradient(135deg, #2ecc71, #27ae60);
		transform: translateY(-2rpx);
		box-shadow: 0 10rpx 20rpx rgba(39, 174, 96, 0.3);
	}
	
	:deep(.ant-btn-danger) {
		background: linear-gradient(135deg, #e74c3c, #c0392b);
	}
	
	:deep(.ant-btn-danger:hover) {
		background: linear-gradient(135deg, #c0392b, #e74c3c);
		transform: translateY(-2rpx);
		box-shadow: 0 10rpx 20rpx rgba(231, 76, 60, 0.3);
	}
	
	/* 弹出框样式 */
	:deep(.uni-popup__wrapper) {
		border-radius: 24rpx;
		overflow: hidden;
	}
	
	:deep(.uni-dialog) {
		border-radius: 20rpx;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	}
	
	:deep(.uni-dialog-title) {
		font-size: 36rpx;
		color: #16a085;
		font-weight: 600;
		padding: 30rpx 20rpx 20rpx;
	}
	
	:deep(.uni-dialog-content) {
		padding: 20rpx 40rpx 40rpx;
	}
	
	:deep(.uni-dialog-button-group) {
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	}
	
	:deep(.uni-dialog-button) {
		font-size: 32rpx;
		color: #16a085;
		font-weight: 500;
	}
</style>